<template>
  <div
    class="echartsWeb"
    @mousemove="handlerMousemove"
    @mouseout="handlerMouseout"
  >
    <div class="echarts" id="echarta"></div>
  </div>
</template>

<script>
import echarts from "@/utils/lib/echarts";
import { BarChart } from "echarts/charts";
import { DataZoomComponent } from "echarts/components";
echarts.use([BarChart, DataZoomComponent]);
export default {
  data() {
    return {
      timer: null,
      option: {},
      myChart1: null,
      ydataArr: [],
      xdataArr: [],
    };
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    chartDeal(ydata, xdata) {
      this.myChart1 = echarts.init(document.getElementById("echarta"));
      this.option = {
        // backgroundColor: "rgba(23, 35, 37, 0.5)",
        tooltip: {
          trigger: "axis",
          textStyle: {
            fontSize: 24, // 字体大小
            align: "left",
          },
          valueFormatter: function (value) {
            return value + " kgce";
          },
        },
        dataZoom: [
          {
            show: false, //是否显示滑动条
            yAxisIndex: 0,
            type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 3, // 一次性展示4个。
          },
        ],
        grid: {
          height: "90%", // 高度
          bottom: "5%",
          right: "10%",
          left: "20%",
        },
        xAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          // boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: "category",
          inverse: true,
          axisLabel: {
            color: "#000000",
            fontSize: "12",
            fontWeight: 500,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          data: ydata,
        },
        series: [
          {
            name: "实际能耗",
            type: "bar",
            data: xdata,
            symbol: "roundRect",
            barWidth: "50%",
            barMinHeight: 20,
            barMaxHeight: "90%",
            label: {
              show: true,
              position: "right",
              color: "#fff",
              fontSize: 12,
            },
            itemStyle: {
              normal: {
                // barMaxWidth: "20%",
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  { offset: 0.6, color: "rgba(243, 68, 81, 0.3)" },
                  { offset: 0, color: "rgba(243, 68, 81, 1)" },
                ]),
              },
            },
            symbolClip: true, // 是否比例显示不完整的一块
            symbolSize: [5, 3],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.timer = setInterval(() => {
        // 每次向后滚动一个，最后一个从头开始。
        if (this.option.dataZoom[0].endValue == ydata.length - 1) {
          this.option.dataZoom[0].endValue = 3;
          this.option.dataZoom[0].startValue = 0;
        } else {
          this.option.dataZoom[0].endValue =
            this.option.dataZoom[0].endValue + 1;
          this.option.dataZoom[0].startValue =
            this.option.dataZoom[0].startValue + 1;
        }
        this.myChart1.setOption(this.option, true);
      }, 3000);

      this.myChart1.clear();
      this.myChart1.setOption(this.option, true);
      // 监听屏幕变化自动缩放图表
      window.addEventListener("resize", function () {
        this.myChart1.resize();
      });
    },
    initChart(ydata, xdata) {
      if (this.timer != null) {
        clearInterval(this.timer);
      }
      this.ydataArr = ydata;
      this.xdataArr = xdata;
      this.chartDeal(this.ydataArr, this.xdataArr);
    },
    handlerMousemove() {
      if (this.timer != null) {
        clearInterval(this.timer);
      }
    },
    handlerMouseout() {
      this.chartDeal(this.ydataArr, this.xdataArr);
    },
  },
};
</script>
<style scoped lang="scss">
.echartsWeb {
  width: 100%;
  height: 350px;
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
